@import 'nib'

.fade
  opacity:0;
  transition:opacity 0.15s linear;

.fade.in
  opacity:1;

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10040;
  background-color: #000000;
  background: -webkit-radial-gradient(50% 50%, ellipse closest-corner, rgba(0,0,0,0.3) 1%, rgba(0,0,0,0.625) 100%);
}
.modal-backdrop.fade {
  opacity: 0;
}
.modal-backdrop,
.modal-backdrop.fade.in {
  opacity: 0.45;
}

.modal.fade .modal-dialog {
  transform: scale(1.3);
  opacity: 0;
  transition: all 0.25s;
  //transition: opacity .1s ease-out, top .2s cubic-bezier(0.25, 0.1, 0.25, 1)
 // top: 10%;
}
.modal.fade.in .modal-dialog {
  transform: scale(1);
  opacity: 1;
  //  top: 10%;
}

.modal-dialog
  min-height: 120px
  modal-padding = 32px
  modal-top-padding = 16px
  .inner
    .header
      background-color: #F8F9FA
      padding: modal-padding
      border-radius 6px 6px 0 0
      border-bottom: 1px solid #DBDFE7
    .body
      padding: modal-padding modal-padding
    .footer
      background-color: #F8F9FA
      padding: 0 modal-padding
      border-radius 0 0 6px 6px
    h2, h3
      font-weight bold
    h2
      font-size 24px
      margin-bottom: 8px
    h3
      margin-bottom: 16px
      margin-top: 24px

    .stats
      ul
        font-size 13px
        margin-left 0
        li
          overflow hidden
          .key
            float left
            font-weight bold
            text-align: right
            width: 125px
            margin-right: 12px
          .value
            overflow: hidden
    .button.secondary
      border-radius 6px
      font-size 13px
      background-color: #F7F9FA
      padding-left:42px
      margin-bottom: 0
      .icon
        absolute top 10px left 18px
    .footer
      padding: modal-top-padding 10px;
      border-top: 1px solid #DBDFE7;
      line-height: 1.2em;
      .license
        font-size 11px
        text-align center

  .file-drop-area
    display: block
    font-weight: bold
    line-height: 30px
    text-align: center
    border: 3px
    background-color: #eee
    &.active
      background-color: #ccc

.modal-styling
  //width = 640px
  //width: width
  .modal-body
    .CodeMirror-scroll
      overflow-x: auto
    textarea
      width: 100%
      height: 480px
      font-family: Menlo, Monaco, Consolas, "Courier New", monospace
      color: #666;
      border: 0
  //margin-left: -(width/2)

.modal-header
  font-size: 21px
  font-weight: bold
  padding-top 12px
  padding-bottom: 12px
  a.fa-download
    margin-left: 10px

.modal-body
  overflow-y: initial

// .modal-shown #page-container {
//   -webkit-filter: blur(3px);
//   -moz-filter: blur(3px);
//   filter: blur(3px);
//   transition: all 0.3s;
// }
